<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue core Test!!</title>
    <script src="/node_modules/vue/dist/vue.min.js"></script>
</head>

<body>
    <div id="some" :cus_tom="name">
        {{name}}{{some.address}}
        <p v-pre>{{name}}</p>
    </div>
    <script>
        const vm = new Vue({
            el: '#some',
            data: {
                name: 'xiao',
                some: {address: 'kaiyang'}
            },
            methods: {
                onSomeClick(e) {
                    console.log('clicked', e);
                }
            },
            watch: {
                some: {
                    handler(newVal) {
                        console.log('the some changed: ', newVal);
                    },
                    deep: true,
                },
                name(newVal) {
                    console.log('the name changed:', newVal);
                }
            },
            beforeCreate() {
                // this.$nextTick(() => {
                //     this.$set(this.some, 'address', 'chengdu');
                // })
                // this.$nextTick(() => {
                //     this.$set(this.some, 'address', 'guangzhou');
                // })
                console.log('before create??:', this.$options, this.$data);
            },
            created() {
                console.log('created:', this.name, this.some, this.onSomeClick);
            },
            beforeUpdate(){
                
                this.$set(this.some, 'address', 'guangzhou');
                console.log('before update!!', this.beforeUpdate);
            }
        });
        // vm.name = 'li';
        // vm.name = 'cor';
        // vm.name = 'yui';
        // setTimeout(() => {
        //     vm.name = 'xiao';
        // })
        // setTimeout(() => {
        //     vm.name = 'cor';
        // }, );
    </script>
</body>

</html>